<template>
  <div class="OrderTable">
    <el-card class="order-container">

      <el-table :load="state.loading" :data="state.tableData" tooltip-effect="dark" style="width: 100%;height: calc(100% - 90px);"
        @selection-change="handleSelectionChange">
        <el-table-column :type="props.itemColumn?.[0].type" width="55"> </el-table-column>
        <el-table-column v-for="(item, ind) in props.itemColumn" :key="item.prop" :prop="item.prop"
          :label="item.label"></el-table-column>

        <!-- <el-table-column prop="totalPrice" sortable label="上传者"> </el-table-column>  -->

        <el-table-column label="操作">
          <template #default="scope">
            <el-popconfirm v-if="!(scope.row.orderStatus == 4 || scope.row.orderStatus < 0)" title="确定删除吗？"
              @confirm="handleClose(scope.row.orderNo)" confirm-button-text="确定" cancel-button-text="取消">
              <template #reference>
                <a style="cursor: pointer; margin-right: 10px;color:#FF453A">删除</a>
              </template>
            </el-popconfirm>
            <!-- <router-link
              :to="{ path: '/down', query: { id: scope.row.orderId } }"
              >下载</router-link
            > -->
          </template>
        </el-table-column>
      </el-table>
      <div>

      </div>
      <div class="pagination-wrap">
        <el-pagination background layout="total, prev, pager, next" :total="state.total" :page-size="state.pageSize"
          :current-page="state.currentPage" @current-change="changePage" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, toRaw } from "vue";
import { ElMessage } from "element-plus";
import { HomeFilled, Delete } from "@element-plus/icons-vue";
import axios from "@/utils/axios";

const props = defineProps(['itemColumn']);
console.log(2222, props.itemColumn)
const emits = defineEmits(['changeTable', 'updateTable', 'handleClose', 'handleSelectionChange'])
const state = reactive({
  loading: false,
  tableData: [{
    orderNo: '1',
    totalPrice: 'totalPrice1',
    orderStatus: 'orderStatus1',
    payType: 1,
    createTime: 'createTime',
    orderStatus: 1
  },
  {
    orderNo: '2',
    totalPrice: 'totalPrice2',
    orderStatus: 'orderStatus2',
    payType: 2,
    createTime: 'createTime2',
    orderStatus: 2
  },
  {
    orderNo: '3',
    totalPrice: 'totalPrice1',
    orderStatus: 'orderStatus1',
    payType: 3,
    createTime: 'createTime',
    orderStatus: 3
  },
  {
    orderNo: '4',
    totalPrice: 'totalPrice2',
    orderStatus: 'orderStatus2',
    payType: 4,
    createTime: 'createTime2',
    orderStatus: 4
  },
  {
    orderNo: '5',
    totalPrice: 'totalPrice1',
    orderStatus: 'orderStatus1',
    payType: 5,
    createTime: 'createTime',
    orderStatus: 5
  },
  {
    orderNo: '6',
    totalPrice: 'totalPrice2',
    orderStatus: 'orderStatus2',
    payType: 6,
    createTime: 'createTime2',
    orderStatus: 6
  }], // 数据列表
  multipleSelection: [], // 选中项
  total: 20, // 总条数
  currentPage: 1, // 当前页
  pageSize: 10, // 分页大小
  orderNo: "", // 订单号
  orderStatus: "", // 订单状态
  // 订单状态筛选项默认值
  options: []
});
const changeTable = () => {
  return 'changeTable'
};

const updateTable = (val) => {
  console.log('更新数据', val)

  emits(updateTable, val)
}

const handleClose = (id) => {
  console.log('删除数据', id)
  emits('handleClose', id);

};
const handleSelectionChange = (val) => {
  state.multipleSelection = val
  console.log('duoxuan多选数据', val)
  emits('handleSelectionChange', val);
}

const changePage = (val) => {
  state.currentPage = val
  console.log('翻页', val)
  emits('changeTable', val)
}

const getOrderList = () => {
  // get数据 可以里层 也可以外层 看你喜欢 --建议外曾传入axios 里面直接拿数据就好

  const params = {
    ...toRaw(state)
  }
  console.log(params, '可以里层 也可以外层 看你喜欢 --建议外曾传入axios 里面直接拿数据就好')
  console.log(toRaw(state.tableData), '结构普通对象作为入参给接口')
  // axios.post('/给我点数据宝子', {
  //        ...params
  //         }).then(() => {
  //           ElMessage.success('添加成功')

  //           // 接口回调之后，运行重新获取列表方法 reload
  //         })
}
// 初始化获取订单列表
onMounted(() => {
  getOrderList()
});


</script>

<style scoped lang="scss">
@import "./OrderTable.scss"
</style>
